import { changeCToF, changeFToC } from '@/utils';
import { useProps } from '@ray-js/panel-sdk';
import { Text, View } from '@ray-js/ray'; // 导入基础 UI 组件
import { Picker } from '@ray-js/smart-ui';
import React, { useCallback, useRef } from 'react';
import BottomComfimView from '../BottomComfimView';
import styles from './index.module.less'; // 引入模块化样式

export function TimerTureSectorDialog({ onClick, value }: { onClick: (value: number) => void, value: number }) {
  const temp_unit_convert = useProps(props => props.temp_unit_convert);//当前温标

  const tureC = [
    "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15",
    "16", "17", "18", "19", "20", "21", "22", "23", "24", "25",
    "26", "27", "28", "29", "30", "31", "32", "33", "34", "35",
    "36", "37", "38", "39", "40"
  ];

  const tureF = [
    "41", "42", "43", "44", "45", "46", "47", "48", "49", "50",
    "51", "52", "53", "54", "55", "56", "57", "58", "59", "60",
    "61", "62", "63", "64", "65", "66", "67", "68", "69", "70",
    "71", "72", "73", "74", "75", "76", "77", "78", "79", "80",
    "81", "82", "83", "84", "85", "86", "87", "88", "89", "90",
    "91", "92", "93", "94", "95", "96", "97", "98", "99", "100",
    "101", "102", "103", "104"
  ];

  const mCurrentTure = useRef(value); //保存默认的温度值
  const onChange = useCallback(event => {
    
    const { value, index } = event.detail;
   const numericValue = typeof value === 'string' ? parseInt(value, 10) : value;
    if (temp_unit_convert === 'c') {//直接传摄氏度值
      mCurrentTure.current = numericValue;
    } else {
      mCurrentTure.current =changeFToC(numericValue);//需要传换算后的摄氏度值
    }

  }, []);

  const defaultIndex=getDatasefaultIndex();

  function getDatasefaultIndex():number { 
   let endValue= temp_unit_convert === 'c' ? tureC.indexOf(value.toString()) : tureF.indexOf(changeCToF(value).toString())
   console.log('getDatasefaultIndex', 'endValue:'+endValue+',temp_unit_convert:'+temp_unit_convert+',value:'+value+',changeCToF(value):'+changeCToF(value));
   return endValue;
  }

  return (
    <View className={styles.overlayout} onClick={() => { onClick(-1) }}>
      <View className={styles.view}>
        <View className={styles.background} >
          <Text style={{ fontSize: '20px', color: 'white', width: '100%', height: '100%', textAlign: 'center', display: 'flex', justifyContent: 'center', alignItems: 'center' }}  >目标温度</Text>
        </View>
        <View style={{ display: 'flex', position: 'relative', width: '100%', height: 'fit-content', flexDirection: 'column' }}>
          <Picker
            className={styles.picker}
            defaultIndex={defaultIndex}
            columns={temp_unit_convert === 'c' ? tureC : tureF}
            onChange={onChange}
          />
          <View style={{ pointerEvents: 'none', position: 'absolute', width: '300rpx', height: '70rpx', backgroundColor: 'rgba(255, 255, 255, 0.1)', borderRadius: '16rpx', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }} />
        </View>
        <View style={{ height: '125rpx' }} />
      </View>
      <BottomComfimView onSave={() => { onClick(mCurrentTure.current) }} onCancle={() => { onClick(-1) }} />
    </View>
  );
}

export default TimerTureSectorDialog;    

